<template>
  <view>
    <uni-nav-bar title="报名成功" fixed status-bar left-icon="left" :border="false" background-color="#fff" @clickLeft="clickLeft"></uni-nav-bar>
    <view class="event-result">
      <view class="top-box">
        <image :src="orderInfo.receiptImage" class="img-code" show-menu-by-longpress></image>
        <view>{{ orderInfo.scanCodePrompt || '报名成功！点击长按识别进群' }}</view>
        <view class="btn-od-id u-center" @click="goOrderDetail">查看订单</view>
      </view>
      <view class="order-info">
        <view class="title">
          <view class="u-line-1" style="padding-bottom: 30rpx">{{ orderInfo.eventsName }}</view>
          <!-- <view class="u-line-1" style="padding-bottom: 30rpx" v-if="!orderInfo.isFillPerson || !orderInfo.isFillPet" @click="goOrderDetail">
            <text style="color:#F0831E">您还未添加参与人/宠信息</text>
            <text style="color:#3289CA;padding-left:40rpx">去添加</text>
          </view> -->
        </view>
        <view class="detail">
          <view class="line">
            <span class="label">报名信息：</span>{{ orderInfo.packageName }}
          </view>
          <view class="line">
            <span class="label">支付费用：</span>{{ orderInfo.payMoney / 100 }} 元
          </view>
          <view class="line">
            <span class="label">活动时间：</span>开始（{{ orderInfo.eventsStartTime }}）
          </view>
          <view class="line">
            <span class="label">活动时间：</span>结束（{{ orderInfo.eventsEndTime }}）
          </view>
        </view>
        <view class="address">
          <view class="">
            <span class="label">报名信息：</span>{{ orderInfo.eventsAddress }}
          </view>
          <view style="padding-top:30rpx" v-if="orderInfo.warmTips">
            <span class="label">温馨提示： </span>{{ orderInfo.warmTips }}
          </view>
          <view class="connect">
            <view>关注活动</view>
            <view style="padding: 0 10rpx">
              <switch @change="switchChange" />
            </view>
            <view style="color:#737373">（关注了解活动进展）</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { storage } from '@/utils/utils'
import { ACTIVITY_ORDER_INFO } from '@/assets/js/config.js'
const { $https, $subscribeMessage } = getCurrentInstance().appContext.config.globalProperties
const optionsPage = ref({})
const orderInfo = ref({})
const currentPayInfo = ref({})
onLoad((options) => {
  optionsPage.value = options
  init()
})
const init = () => {
  $https({
    url: '/app/eventsInfo/enroll/latest',
    type: '',
    data: {
      orderId: optionsPage.value.id
    }
  }).then(res => {
    if (res.code === 0) {
      orderInfo.value = res.data
      storage.set(ACTIVITY_ORDER_INFO, {
        eventsOrderId: res.data.eventsOrderId,
        id: res.data.eventsId
      })
    }
  })
  $https({
    url: '/app/eventsInfo/enroll/latest',
    type: ''
  }).then(res => {
    if (res.code === 0) {
      currentPayInfo.value = res.data
    }
  })
}
const clickLeft = () => {
  uni.navigateBack({
    delta: 1,
    fail: () => {
      uni.switchTab({
        url: '/pages/index'
      })
    }
  })
}
const switchChange = () => {
  const tmplIds = ['THwI3ldsMXma6GFCfdvQZyaANO6iMZzK6xOrAJjce9I']
  $subscribeMessage(tmplIds, (res) => {
    console.log(res)
  })
}
const goOrderDetail = () => {
  uni.redirectTo({
    url: `/user/order/eventsDetail?orderId=${currentPayInfo.value.eventsOrderId}&eventsId=${currentPayInfo.value.eventsId}`
  })
}
</script>

<style scoped lang="scss">
@import "@/assets/styles/minx.scss";
.event-result{
  min-height: 100vh;
  background: #FFF8F0;
  padding: 40rpx 30rpx;
  .top-box{
    text-align: center;
    font-size: 32rpx;
    font-weight: bold;
    color: #414141;
    margin-bottom: 40rpx;
  }
  .img-code{
    width: 270rpx;
    height: 270rpx;
    margin: 0 auto 30rpx auto;
  }
  .btn-od-id{
    position: relative;
    width: 220rpx;
    height: 64rpx;
    border-radius: 1000px;
    font-size: 28rpx;
    margin: 0 auto;
    font-weight: normal;
    margin-top: 60rpx;
    &::after{
      @include border(full, #CACACA, 1000px)
    }
  }
  .order-info{
    border-radius: 20rpx;
    background: #FFF;
    padding: 30rpx;
    color: #252525;
    .title{
      font-size: 28rpx;
      line-height: 28rpx;
      position: relative;
      &::after{
        @include border(bottom, #E1E1E1)
      }
    }
    .detail{
      padding-top: 30rpx;
      font-size: 26rpx;
      color: #252525;
      position: relative;
      &::after{
        @include border(bottom, #E1E1E1)
      }
    }
    .address{
      padding-top: 30rpx;
      font-size: 26rpx;
      color: #252525;
    }
    .connect{
      display: flex;
      padding-top: 30rpx;
      align-items: center;
    }
    .line{
      padding-bottom: 30rpx;
      line-height: 26rpx;
    }
    .label{
      color: #999;
    }
  }
}
</style>
